<template>
        <div class="video-card-Anime">
            <router-link :to="routerURl.anime+videoset.videoId" class="video-link">
                <div class="video-thumbnail">
                    <img :src="videoset.avatarUrl" :alt="videoset.videoTitle">
                    <span class="video-status">{{videoset.videoStatus}}</span>
                    <span class="video-playcount">
              <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>
              {{videoset.videoPlayCount}}
            </span>
                </div>
                <div class="video-info">
                    <h3 class="video-title">{{videoset.videoTitle}}</h3>
                    <div class="video-meta">
                        <span class="video-update">{{videoset.videoUpdate}}</span>
                        <span class="video-score">{{videoset.videoScore}}</span>
                    </div>
                </div>
            </router-link>
        </div>
</template>

<script setup>
import {routerURl} from "@/utils/Request.js";

const props = defineProps({
    videoset:{
        default:{},
    }
})
</script>

<style lang="scss" scoped>
/* 视频卡片样式 */
.video-card {
  background: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.video-link {
  text-decoration: none;
  color: inherit;
}

.video-thumbnail {
  position: relative;
  padding-top: 56.25%; /* 16:9 比例 */
  background: #f5f5f5;
}

.video-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-status {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

.video-playcount {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  font-size: 12px;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 2px 6px;
  border-radius: 4px;
}

.video-playcount svg {
  margin-right: 4px;
}

.video-info {
  padding: 12px;
}

.video-title {
  font-size: 15px;
  margin: 0 0 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 42px;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

.video-score {
  color: #ffb800;
  font-weight: bold;
}

</style>